<html>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>主页</title>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
    crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous"></script>

<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>

<link rel="stylesheet" href="../style/main.css">

<body>
    <h1 class="text-center">列表</h1>
    <div id="stockList">
        <table class="table table-bordered table-hover text-center">
            <caption class="text-center" v-on:click="refresh">信息列表</caption>
            <tr v-on:click="order">
                <th data-sort="0">代码</th>
                <th data-sort="1">名称</th>
                <th data-sort="2">日期</th>
                <th data-sort="3">价格</th>
            </tr>
            <!-- <tr>
                <td>11</td>
                <td>12</td>
                <td>13</td>
                <td>13</td>
            </tr> -->
            <tr v-for="ll in list">
                <td v-for="i in ll" :key="i.id">{{i}}</td>
            </tr>
        </table>
        <nav aria-label="Page navigation">
            <ul class="pagination"  v-on:click="getPage">
                <li>
                    <a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
                </li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li>
                    <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
                </li>
            </ul>
        </nav>
    </div>

</body>
<script src="../js/index.js"></script>
<script src="../js/test.js"></script>

</html>